$def with (form, text)

<!doctype html>

<html>

    <head>
        <title>TAP Web2.0 Archive Interface</title>
        <link rel="stylesheet" type="text/css" href="/static/style.css" />
	    <link href="/static/css/facebox.css" media="screen" rel="stylesheet" type="text/css"/>  
		<link rel="stylesheet" type="text/css" href="/static/css/jquery-ui-1.8.16.custom.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/ColReorder.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/ColVis.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/demo_table_jui.css" />	
		<link rel="stylesheet" type="text/css" href="/static/css/TableTools.css" />	
        <script type="text/javascript" src="/static/js/jquery.js"></script>     
        <script type="text/javascript" src="/static/js/functions.js"></script>
		<script src="/static/js/facebox.js" type="text/javascript"></script> 
		<script src="/static/js/jquery.dataTables.js" type="text/javascript"></script> 
		<script src="/static/js/ColReorder.js" type="text/javascript"></script> 
		<script src="/static/js/ColVis.js" type="text/javascript"></script>
		<script type="text/javascript" charset="utf-8" src="/static/js/ZeroClipboard.js"></script>
		<script type="text/javascript" charset="utf-8" src="/static/js/TableTools.js"></script> 	
		<script src="/static/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
		<script src="/static/js/index_single_archive.js" type="text/javascript"></script>  	
        <link rel="icon" 
      	            type="image/png" 
                              href="/static/icon2.png">
                              

	<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="/static/styleIE.css" />
			<style type="text/css" media="screen">
				#header div{
					background-image: none;
					filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='overlay.png', sizingMethod='scale');
				}
			</style>
	<![endif]-->
	
	 <!--[if lte IE 6]>
      <div id="ie-warning" style="color:red;font-size:12px;">This site does not support IE6. Please upgrade to a newer version to use this application</div>
      
    
     <![endif]-->

    </head>
    
    <body class="example_alt_pagination">
	
	<div id="container_index">
	<div id="header">
	  <!-- Div is for Shadow Overlay	-->
	  <div>
	    <a href="/"><img style="margin-top:22px;float:left;border:none" src="/static/Title4.png" /></a>
	    <img style="margin-top:8px;margin-right:10px;float:left;width:160px;height:80px;border:2px solid gray;float:right;" src="/static/vsa_top.gif" />
	  </div>

	</div>
	
	<div id="gradient"></div>
	<br>
    <div id="toggle_metadata" class="toggle_metadata"></div>
	
	<div id="main">
	<div id="searchbar">	
	        <form class="form" method="post" name='form'> 
	             $:form.render()  
		    	 <input class="button" type="submit" value="Send"/>
	        </form>
	        <p style="font-size:11px;float:left;margin-left:65px;font-style:italic;color:#87AFC7">Please select from the list of TAP endpoints and execute your ADQL query</p>
	       
	
	        <div id="toggle_endpoints">
	        	<a>Toggle Endpoint selection</a>
	        </div>

 
			<div id="settings">
				<a>Settings</a>
			</div>

			<div id="cache_or_fetch">			
			  <form>
			    <input type="radio" name="cache_selection" value="1" checked> Cached 
			    <input type="radio" name="cache_selection" value="0" > Registry
			  </form>
	 		</div>

	</div>
	

	<div id="settings_form">
		<form id="settings_outter_box">
			<div style="width:470px;margin-bottom:40px;margin-left:75px;text-align:left"><span style="text-align:left;font-weight:bold;font-size:11px">Query data processing mode:</span>
				<div style="font-size: 11px; float:right;background-color: white;border: 2px solid gray;padding:5px;padding-bottom:10px">
				    <input type="radio" name="table_mode" value="static" checked> Server-side (Recommended)<br> 
				    <input type="radio" name="table_mode" value="interactive" > Browser-based (Smaller data-sets)
				 </div>   
				 <br><br><br><br>
				 <span style="font-size:11px">Help: Select where the main processing for the table data will be conducted, server-side for large-data, browser-based for smaller data and faster interactions</span>
			</div> 
		</form>
	</div>
	
	
	<div id="endpoints_form">
		<p>Please select from the list of TAP endpoints:</p>
   		<a id="select_all">Check All</a>
	    <form class="endpoints_form" method="post" name='endpoints_form'> 	
	    	<div id="overflow"></div>
			<div id="prefixes" style="display:none"></div>
		    <input type="submit" class="submit" value="Select"/>
		</form>	
	</div>
   
	<br>
	<div id="load"> </div>
	
	
	<div id="loading_options">
		<a href="#" class="myButtonStop">Stop query</a>
		<a href="#" class="myButtonEmail">Send via email</a>
	</div>
    <div id="processing" style="display:none">Please wait.. Querying the registry for available TAP endpoints</div>
    
    <br><br>

    <div id="email_message"></div>
    
    <div id="send_email">
   		 <form class="email_form" method="post" name='email_form'>
   		 	<p>Please enter your email:<a class="email_cancel" href=''>x</a></p>
   		 	<input type="text" name="email" id="email" /> 	
 		 	<input type="submit" value="Submit" class='email_submit'/>
   		 	<div class="spacer"></div>
   		 </form>
    </div>
	
    <div id="error" style="display:none"></div> 
    
    <div id="metadata">
    <br>
    <span class="metadata_cancel">[ <a>Hide</a> ]</span> 
	    <div style="margin:0 auto; text-align:center;width:280px;background-color:#EDE8E8;color:#3E3E3E;padding-left:10px;padding-top:10px;padding-bottom:4px;margin-bottom:10px;border:1px solid gray;height:30px;">
	    	<div style="font-size:20px">Archive Metadata</div> 
	    </div>	
	    	
	    <p style="font-size:12px;font-style:italic">Click on a table name to reveal the metadata</p><br>
	    
	    <p style="font-size:11px;font-style:italic">If you have selected more than one endpoints, 
	    a new temporary TAP endpoint will be assigned to your session.The tables for each of the endpoint
	    will have a prefix, in accordance to the endpoint name. For example,if you have selected
	    the endpoint: http://wfaudata.roe.ac.uk/ukidssDR6-dsa/TAP, than to query the table named Filter from that endpoint,
	    you can submit a query such as select * from wfaudata_roe_ac_uk_ukidssDR6-dsa_Filter. 
	    <br>
	    If you have selected a single endpoint, the tables can be queried without a prefix.
	    <br><br>
	    For more information on the tables you may click through the table data and view the column and table names.
	    </p>
	   
	    <div style="height:1px;background:#EC9E9E;width:95%;margin:0 auto;"></div>
	    <br>
	    <div id="tables"></div> 
    </div>

	<div id="results">

	$text
	</div>
	
		
      <br><br>
    </div>   
	
	<div id="about" style="display:none;font-size:13px;">
		<h5>
		Welcome to the TAP/ADQL Web2.0 interface
		</h5>
		<br><br>
		<p style="font-size:12px;">Author: Stelios Voutsinas
		<br>
		Project: Web2.0 TAP archive interface
		<br>
		Institution: University of Edinburgh
		<br>
		Contact: steliosvoutsinas@yahoo.com
		<br><br><br><br>
		</p>
	</div>
	
	<div id="help" style="display:none;font-size:13px;">
		<h5>
		Help:
		</h5>
		<br><br>
		<p  style="font-size:12px;">Enter an ADQL query to be executed in the main text box.
		<br><br>
		Before submitting a query, you must have selected at least one of the TAP endpoints where your query will be submitted to
		Click the select button to submit your selection.
		<br><br>
		Upon selecting from the TAP endpoints, you may view the table metadata for all the selected endpoints, by clicking the 'Table 
		Metadata' button on the left of the page.
		<br><br>
		You can also stop a query that has been executing for too long, or click on the 'email results' button and enter your details to
		have the results emailed to you.
		<br><br>
		When a query has completed, you may either save the file locally, view and sort the results, or launch the results in the viewer
		, where you can have additional features such as a plot of the result rows.
		<br><br>
		</p>
	
	</div>
	
    <div id="footer">
	    <a href="#about" rel="facebox">About</a> | 
	    <a href="#help" rel="facebox">Help</a> | 
	    University of Edinburgh 2011
    </div>  
   
   </div>
   
    </body>

</html>

